<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onBeforeUpdate, onMounted, onUnmounted, onUpdated, watch } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

let themeStatus
watch(
  () => store,
  () => {
    themeStatus = store.getters.themeStatus ? 'dark' : 'auto'
  },
  { deep: true, immediate: true }
)

// 模拟数据
const randomData = (min, max) => {
  let range = max - min
  let random = Math.random()
  return (min + range * random).toFixed(4)
}

let data = []

for (let i = 0; i < 1000; i++) {
  data.push(randomData(0.6, 0.7))
}
let myChart
onMounted(() => {
  console.log(data)
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById('main'), themeStatus)
  // 绘制图表
  myChart.setOption({
    title: {
      text: '实时图'
    },
    tooltip: {},
    xAxis: {
      data: []
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        showSymbol: false,
        data: data
      }
    ]
  })
})

onUnmounted(() => {
  myChart.dispose
  clearTimeout(timer)
})
const timer = setInterval(() => {
  for (let i = 0; i < 10; i++) {
    data.shift()
    data.push(randomData())
    myChart.setOption({
      series: [
        {
          data: data
        }
      ]
    })
  }
}, 1000)
</script>

<style lang="scss" scoped></style>
